﻿<template>
      <!--send box s-->
  <div class="reginster_wrap">
    <mt-button @click.native="popupVisible3 = true" size="large" ref="click_pop" class="hide">右侧弹出 popup</mt-button>
    <div class="finish_msg_title">
      用户登陆
    </div>

    <!--<div class="input_base input_base_top" placeholder="" v-on:click.self="pop_show($event)" ref="school">
      {{select_school}}
    </div>-->

    <input class="input_base" placeholder="手机号邮箱" type="number" ref="thom_m"/>
    <!-- 密码s -->
    <div class="yanzhem_wrapper">
      <input class="input_base" placeholder="密码" ref="yzm_ttt" type="password" />
    </div>
    <!-- 密码 e-->
    <div class="next_step" v-on:click="next_f">登录</div>
    <!--忘记密码s-->
    <!--<div class="forget_pwd" v-on:click="forget_pwd">-->
      <!--忘记密码-->
    <!--</div>-->
    <!--忘记密码e-->

    <!--<mt-popup v-model="popupVisible3" position="right" class="mint-popup-3 pop_wraper" :modal="false">-->
      <!--<input class="input_base pop_search" placeholder="输入学校"-->
             <!--v-on:input="seach($event)" ref="search_vale"-->
             <!--v-focus_ud:value='popupVisible3'-->
      <!--/>-->
      <!--<div class="show_search_box" v-for="info in menu_list" v-on:click.self="change_address($event,info.id)">-->
        <!--{{info.schoolName}}-->
      <!--</div>-->
      <!--<div v-if="menu_list_len_n" class="menu_list_len_n">-->
        <!--没有匹配的消息-->
      <!--</div>-->
      <!--<mt-button @click.native="popupVisible3 = false" size="large" type="primary" class="close_pop">返回</mt-button>-->
    <!--</mt-popup>-->
    <div class="login_bottom">
      <div v-on:click.self="$goto('/Wrap_login/Finish_msg')">
        用户注册
      </div>
    </div>
  </div>
</template>
<script>
  import { mapState, mapMutations, mapActions, mapGetters } from 'vuex';
  import { Toast, MessageBox,Indicator } from 'mint-ui';
  import qs from "qs";
  import common from "../../common/common.js";
export default {
  name: 'hello',
  data () {
    return {
      get_layer_show: this.$store.getters.get_layer_show,
      popupVisible3:false,
      menu_list: [],
      select_school: "输入学校",
      school_id: "",
      isloading: false,
      menu_list_len_n:false,
      data_yzm:"获取验证码",
      base_url:""
    }
  },
  ...mapActions([
    "thom_redirect",
  ]),
  ...mapMutations([
    "Change_certain_layer"
  ]),
  created:function(){
    this.$emit("back_hide",false);
    this.$store.commit("change_first_view_state",true);
  },
//  mounted: function () {
//     let mesg = this.$store.getters.get_user;
//     this.$nextTick(() => {
//      if (mesg.phone == undefined) return;
//      this.$refs.phone.value = mesg.phone;
//      this.$refs.sec.value = mesg.pwd;
//      this.select_school = mesg.school_name;
//      mui.plusReady(function(){
//        plus.navigator.setStatusBarBackground("#0f2441");
//      })
//     })
//  },
  beforeRouteLeave(to, from, next) {
    // 导航离开该组件的对应路由时调用
    // 可以访问组件实例 `this`
    if (to.path == "/Index_main/Wrap_certain_layer/Certain_layer" && this.popupVisible3 == true) {
      this.popupVisible3 = false;
      next(false)
    } else {
      next(true)
    }
  },
  components: {

  },
  methods: {
    ...mapMutations([
      "Change_user"
    ]),
    forget_pwd:function () {
      this.$store.dispatch("thom_redirect",{name:"/Wrap_login/forget_pwd",router:this.$router});
    },
    change_address: function (e,id) {
      this.select_school = e.target.innerText;
      this.popupVisible3 = false;
      this.school_id = id;
    },
    pop_show: function (event) {
      this.$refs.click_pop.$el.click();
      this.$refs.click_pop.$el.blur();
      this.menu_list = [];
      this.menu_list_len_n = false;
      this.$refs.search_vale.value = "";
      setTimeout(() => {
        this.$refs.search_vale.focus();
      },0)
    },
    //页面跳转
    certain_jump: function () {
      this.$store.dispatch("thom_redirect",{name:"/letter/SucLetter",router:this.$router});
    },
    hid_layer:function () {
      this.$store.dispatch("thom_redirect",
        {
          name:"/Index_main",router:this.$router
        });
    },
    login:function () {
      this.$store.dispatch("thom_redirect",
        {
          name:"/Index_main",router:this.$router
        });
    },
    goto_register:function () {
      this.$store.dispatch("thom_redirect",
        {
          name:"/Login/Register",router:this.$router
        });
    },
    _this_jump: function () {
      mui.plusReady(function () {
        //获得详情页面
        let index_id = localStorage.getItem("index_id")

        //触发app_index的login_change事件
        let detailPage = plus.webview.getWebviewById(index_id);

        mui.fire(detailPage,'login_change');
//        plus.navigator.setStatusBarBackground("#9f5c2f");
        setTimeout(()=>{
          mui.back();
        },0)
      })
    },
    next_f: function () {
      let phone = this.$refs.thom_m.value;
      let sec = this.$refs.yzm_ttt.value;
      if (phone == "") {
        Toast("请输入账号");
        return false;
      } else if (sec == "") {
        Toast("请输入密码");
        return false;
      }
      //设置user 提交
     //登录 开始s
     Indicator.open();
     let ajax_base = sessionStorage.getItem("ajax_base");
    this.$http.post(this.base_url+'/yizhiweimen/api/user/login',
        qs.stringify(
        {
            accountName:phone,
            pwd:sec,
        }))
        .catch((thrown) => {
          Indicator.close()
          Toast({
            message: '网络出错',
            position: 'bottom',
            duration: 2000
          });
        return;
        }).then((e) => {
            Indicator.close();
            if(!!e.data.msg){
              Toast({
                message: e.data.msg,
                position: 'bottom',
                duration: 2000
              });
                return;
            }
            if(e.data == ""){
                 Toast({
                    message: '登陆失败',
                    position: 'bottom',
                    duration: 2000
                });
                return;
            }else{
              Toast({
                message: "登陆成功",
                position: 'bottom',
                duration: 2000
              });

              localStorage.setItem("user_loc_mes",JSON.stringify(e.data));
              sessionStorage.setItem("user_loc_mes",JSON.stringify(e.data));

              //都加吧 ~~~
              localStorage.setItem("user_id",e.data.user.id);
              sessionStorage.setItem("user_id", e.data.user.id);

              //是app
              localStorage.setItem("is_app",false);

              console.log(localStorage.getItem("is_app"));

              //预加载s
              let user_id = e.data.user.id;
              let obj = this.$store.getters.get_footer_menu_list;
              let pre_load = [];
              this.$mui_goto({
                   url:"./app_index.html",
                    id:"app_index.html"
              });
//              this._this_jump();
            }
            //mui 跳转
      })
    }
  },
}
</script>
<style>
  /*!*忘记密码s*!*/
  /*.forget_pwd{*/
    /*text-align: center;*/
    /*margin:  4vw auto 0;*/
    /*font-size:4.5vw;*/
    /*color:darkred;*/
    /*width: auto;*/
    /*float: left;*/
    /*margin-left: 10vw;*/
    /*text-decoration: underline;*/
    /*line-height: 1.5;*/
    /*}*/
  /*!*忘记密码e*/
  /**!*/
  /*!*验证码s*!*/
  /*.login_header{*/
    /*padding-top:5.3vw;*/
  /*}*/
  /*.time_font_s {*/
    /*font-size: 4vw;*/
  /*}*/
  /*.yanzhem_wrapper{*/
    /*position:relative;*/
  /*}*/
  /*.get_yzm{*/
    /*position:absolute;*/
    /*right:0;*/
    /*top:50%;*/
    /*transform:translate(-70%,-50%);*/
    /*border:2px solid #9f5c2f;*/
    /*border-radius:1vw;*/
    /*text-align:center;*/
    /*padding:1vw 0.5vw;*/
    /*color:#9f5c2f;*/
    /*font-size:3vw;*/
  /*}*/
  /*!*验证码e*!*/
  /*.menu_list_len_n {*/
    /*font-size: 6vw;*/
    /*color: #9f5c2f;*/
    /*margin-top: 2vw;*/
  /*}*/
  /*.mint-indicator-mask {*/
    /*z-index: 3000;*/
  /*}*/
</style>
<style lang="scss" scoped>
  @import "../../../static/sass/thom_c_size.scss";
  .login_bottom{
    width: tovw(324);
    position: fixed;
    bottom:tovw(60);
    left:50%;
    transform: translateX(-50%);
    text-align:center;
    div{
      text-align: center;
      font-size: tovw(30);
      font-weight: bold;
      color:#9f5c2f;
    }
  }
</style>
<style scoped>
  .input_base{
    border:1px solid #9f5c2f;
    border-radius: 2vw;
  }
  @component-namespace page {
    @component indicator {
      @descendent wrapper {
        padding: 0 20px;
        position: absolute 50% * * *;
        width: 100%;
        transform: translateY(-50%);
        button:not(:last-child) {
          margin-bottom: 20px;
        }
      }
    }
  }
  .load {
    position: absolute;
    top: 0;
    z-index:4000;
  }
  .mint-button {
    border-radius: 0;
  }
  .show_search_box {
    width: 80%;
    height: 2rem;
    line-height: 2rem;
    text-align: left;
    font-size: 0.6rem;
    border-bottom: 1px solid #9f5c2f;
    margin: 0.2rem auto;
    letter-spacing: 1px;
  }
  .mint-popup .pop_search {
    border-radius: 0;
    padding: 0;
    padding-left: 6%;
    // box-shadow: 0 2px 6px 2px #9f5c2f;
    width: 94%;
    border-bottom: 2px solid #9f5c2f;
    margin: 0;
    height:10vw;
    line-height: 10vw;
    font-size: 5vw;
    color: #9f5a30;
    font-weight:600;
    letter-spacing:1px;
  }
  /*close_pop s*/
  .close_pop {
    background-color:#9f5c2f;
    position: fixed;
    bottom: 0;
  }
  /*close_pop e*/
  /*pop_wraper s*/
  .hide {
    position: absolute;
    top: 0;
    z-index: -1;
    opacity: 0;
  }
  .pop_wraper {
    width: 100%;
    height: 100%;
    background-color: #fff;
  }
  /*pop_wrapper e*/
  /*finish_msg s*/
  .login_header_left {
    width: 7.2vw;
  }
  .login_wrap .login_header_left {
    margin: 1rem 0 0 6%;
    width: 7.2vw;
  }
  .login_wrap .login_header_right {
    margin: 0.8rem 6% 0 0;
  }
  .next_step {
    width: 86%;
    height: 10vw;
    line-height: 10vw;
    background-color: #9f5c2f;
    color: #fff;
    margin: 0 auto;
    border-radius: 2vw;
    font-size: 4vw;
  }
  .input_list {
    margin-bottom: 0.8rem;
    color: #fff;
    font-size:2.5vw;
    font-weight: 600;
    text-align:left;
    color:#9f5c2f;
    padding-left:10vw;
  }
  .reginster_wrap .input_base_top {
    color: #9f5c2f;
    text-align: left;
    //padding-left:6%;
    font-weight: 600;
    height:9.3vw;
    line-height:9.3vw;
  }
  .input_base::-webkit-input-placeholder {
    color: #9f5c2f;
    text-align: left;
    font-weight: 600;
    padding-left: 0%;
  }

  .input_base:-moz-placeholder {
    text-align: center;
    color: #9f5c2f;
    font-weight: 600;
    padding-left:0%;
  }

  .input_base:-ms-input-placeholder {
    text-align: center;
    /* IE10+ */
    color: #9f5c2f;
    font-weight: 600;
    padding-left: 0%;
  }
  .input_base {
    padding: 0;
    padding-left: 6%;
    outline: none;
    display: block;
    width: 80%;
    height: 10vw;
    line-height: 10vw;
    background-color: #fff;
    border-radius: 2vw;
    margin: 0 auto 2.6vw;
    font-size: 0.6rem;
    color: #9f5c2f;
    font-size:3vw;
    border: 1px #9f5c2f solid;

  }
  .finish_msg_title {
    font-size: 4vw;
    color: #9f5c2f;
    width: 22.4vw;
    height: 7.3vw;
    line-height: 7.3vw;
    text-align: center;
    color: #9f5a30;
    background-color: #fff;
    margin: 0.6rem auto 1.1rem;
    border-radius: 2vw;
    letter-spacing: 1px;
    font-weight: 700;
  }
 /*finish_msg e*/
  .reginster_wrap {
    width: 100%;
    height: 100%;
  }
.certain_btn_inner{
  border:2px solid #9f5c2f;
  width: 86%;
  height: 2rem;
  line-height: 2rem;
  color: #ffffff;
  background-color: #9f5c2f;
  text-align: center;
  border-radius: 2vw;
  margin: 0 auto;
}
.inner_main_input{
  padding-right:6%;
  width: 74%;
}
*::-webkit-input-placeholder {
  text-align: center;
}

*:-moz-placeholder {
  text-align: center;
}

*:-ms-input-placeholder {
  text-align: center;
}

/*bottom_btn*/
.bottom_btn{
  width: 8rem;
  transform:translateX(-50%) ;
  position: absolute;
  bottom: 1.85rem;
  left:50%;
}

.bottom_left_btn{
  float: left;
  width: 3.5rem;
  height: 1rem;
  line-height:1.8;
  text-align: center;
  color: #9f5c2f;
  font-size: 0.6rem;
  background-color: #ffffff;
  border-radius: 1.4vw;
  letter-spacing: 1px;
}
.mid_line{
  margin-left: 0.35rem;
  margin-right: 0.35rem;
  float: left;
  width: 2px;
  background-color: #9f5c2f;
}
</style>

 
